<template>
    <div class="banner">
        <div class="bannerText">
            <img  :src="textImg" alt="">
            <RoundButton_mobile class="about">关于我们</RoundButton_mobile>
        </div>
    </div>
</template>

<script setup lang="ts">
import textImg from '@/assets/images/mobile-banner-text.png'
</script>


<style lang="scss" scoped>
.banner{
    background: url('@/assets/images/mobile-banner-bg.jpeg') no-repeat center -30px;
    position: relative;
    background-size: 100%;
    width: 100%;
    height: 405px;
    .bannerText{
        position: absolute;
        left: 50%;
        bottom: -28px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, -60%);
        img{
            width: 300px;
            height: 80px;
        }
        .about{
            margin-top: 5px;
        }
    }
}
// .video{
//     width: 100%;
//     height: 100%;
//     pointer-events: none;
//     .banner-image{
//         position: absolute;
//         left: 50%;
//         top: 40%;
//         width: 472px;
//         height: 127px;
//         transform: translate(-50%, -50%);
//     }
//     .about{
//         position: absolute;
//         z-index: 10;
//         left: 50%;
//         top: 60%;
//         transform: translate(-50%, -50%);
//     }
// }
</style>